<div class="accordion {if $backgroud}accordion-flush{/if}" id="{$id}">
  {volist name="list" id="item"}
  <div class="accordion-item {if $backgroud}border-t-0 border-l-0 border-r-0 rounded-none{/if} bg-white border border-gray-200">
    <h2 class="accordion-header mb-0" id="heading{$id}{$key}">
      <button class="
        accordion-button
        relative
        flex
        items-center
        w-full
        py-4
        px-5
        text-base text-gray-800 text-left
        bg-white
        border-0
        rounded-none
        transition
        focus:outline-none
      " type="button" data-bs-toggle="collapse" data-bs-target="#collapse{$id}{$key}" aria-expanded="true"
        aria-controls="collapse{$id}{$key}">
        {$item.title}
      </button>
    </h2>
    <div id="collapse{$id}{$key}" class="accordion-collapse collapse" aria-labelledby="heading{$id}{$key}" {if !$alwaysOpen}data-bs-parent="#{$id}"{/if}>
      <div class="accordion-body py-4 px-5">
        {$item['content']|raw}
      </div>
    </div>
  </div>
  {/volist}
</div>